<template>
  <div class="container">
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 头部区域 -->
      <el-form
        ref="articlesRef"
        :model="userInfo"
        label-width="80px"
        class="articles-form"
      >
        <el-form-item label="标签名称">
          <el-input
            v-model="userInfo.keyword"
            class="articles-form-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="userInfo.state" placeholder="请选择">
            <el-option label="启用" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button class="tags-btn" size="mini" @click="clearFrom"
          >清除</el-button
        >
        <el-button
          type="primary"
          class="tags-btn"
          size="mini"
          @click="getArticlesList"
          >搜索</el-button
        >

        <span class="add-contents">
          <el-button type="success" icon="el-icon-edit" @click="addDialogShow"
            >新增目录</el-button
          >
        </span>
      </el-form>

      <!-- 提示消息 -->
      <el-alert type="info" show-icon :closable="false">
        <template slot="title">数据一共 {{ counts }} 条</template>
      </el-alert>

      <!-- 表格区域 -->
      <el-table :data="articlesList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="文章标题" width="180">
          <template slot-scope="scope">
            {{ scope.row.title }}
            <!-- 视频按钮 -->
            <i
              v-if="scope.row.videoURL"
              class="el-icon-film video"
              @click="videoDialog(scope.row)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="200">
        </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="reads " label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已禁用</span>
            <span v-else-if="scope.row.state === 0">已启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="reads " label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="previewDialogShow(scope.row)"
              >预览</el-button
            >

            <el-button type="text" @click="disable(scope.row)">{{
              scope.row.state === 0 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              @click="editDialogShow(scope.row)"
              :disabled="scope.row.state === 0"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="remove(scope.row)"
              :disabled="scope.row.state === 0"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userInfo.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="userInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 视频弹出层 -->

    <el-dialog
      :visible.sync="videoDialogVisible"
      custom-class="videoDialogVisible"
    >
      <video :src="this.videoURL" autoplay class="video-dialog"></video>
      <!-- 关闭视频按钮 -->
      <div class="closeBtn" v-if="videoDialogVisible">
        <i class="el-icon-error" @click="closeBtn"></i>
      </div>
    </el-dialog>

    <!-- 预览弹出框 -->
    <el-dialog
      title="预览文章"
      :visible.sync="previewVideoDialogVisible"
      width="50%"
    >
      <articles-preview :data="data"></articles-preview>
    </el-dialog>

    <!-- 添加文章弹出框 -->
    <el-dialog
      title="新增文章"
      :visible.sync="addDialogVisible"
      width="50%"
      :destroy-on-close="true"
    >
      <articles-add
        @close="addDialogVisible = false"
        @update="getArticlesList()"
      ></articles-add>
    </el-dialog>

    <!-- 修改文章 -->
    <el-dialog title="提示" :visible.sync="editDialogVisible" width="50%">
      <el-form
        :model="editRuleForm"
        :rules="editRules"
        ref="editRuleRef"
        label-width="80px"
        class="edit-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="editRuleForm.title" class="input"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <quill-editor
            ref="myTextEditor"
            v-model="editRuleForm.content"
            :options="editorOption"
            style="height:220px;"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" class="formItem" prop="url">
          <el-input v-model="editRuleForm.url" class="input"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, changeState, remove, update } from '@/api/hmmm/articles'
import articlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
// 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: { articlesPreview, ArticlesAdd, quillEditor },
  data() {
    return {
      // 数据列表
      articlesList: [],
      // 借口参数
      userInfo: {
        tagName: null,
        page: 1,
        pagesize: 10,
        state: null,
        keyword: ''
      },
      // 总数量
      counts: 0,
      // 状态改变所需
      state: 0,
      // video配置
      videoDialogVisible: false,
      videoURL: '',
      previewVideoDialogVisible: false,
      data: {},
      addDialogVisible: false,
      // 修改参数
      editRuleForm: {
        title: '',
        content: '',
        url: ''
      },
      // 验证
      editRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        url: [
          {
            pattern: /((http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?)/,
            message: '请输入正确网址',
            trigger: 'blur'
          }
        ]
      },
      content: '',
      // 富文本配置
      editorOption: {
        placeholder: '编辑文章内容'
      },
      editDialogVisible: false,
      // 修改项目的id
      editId: null
    }
  },
  created() {
    this.getArticlesList()
  },
  methods: {
    // 发送获取请求
    async getArticlesList() {
      try {
        const { data } = await list({
          page: this.userInfo.page,
          pagesize: this.userInfo.pagesize,
          keyword: this.userInfo.keyword,
          state: this.userInfo.state
        })
        this.articlesList = data.items
        this.counts = data.counts
      } catch (err) {
        this.$message('获取失败，请稍后重试')
      }
    },

    // 清空
    clearFrom() {
      this.userInfo.keyword = ''
      this.userInfo.state = null
      this.getArticlesList()
    },

    // 禁用
    async disable(scope) {
      if (this.state === 0) {
        this.state = 1
      } else if (this.state === 1) {
        this.state = 0
      }
      if (this.articlesList.state === 0) {
        this.disabled = true
      }
      try {
        await changeState({
          id: scope.id,
          state: this.state
        })
        this.getArticlesList()
        this.$message.success('状态修改成功')
      } catch (err) {
        this.$message.error('状态更新失败,请稍后重试')
      }
    },

    // 删除
    async remove(scope) {
      const confirmed = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmed !== 'confirm') return this.$message.info('已取消删除')
      try {
        const { data } = await remove({
          id: scope.id
        })
        if (data.success === true) {
          this.$message.success('删除用户成功')
        } else {
          this.$message.error('删除失败')
        }
        if (this.counts % this.userInfo.pagesize === 1) this.userInfo.page--
        this.getArticlesList()
      } catch (err) {
        this.$message.error('网络异常，请稍后重试')
      }
    },
    // 分页
    handleSizeChange(newSize) {
      this.userInfo.pagesize = newSize
      this.getArticlesList()
    },
    handleCurrentChange(newpageSize) {
      this.userInfo.page = newpageSize
      this.getArticlesList()
    },
    // 视频弹出
    videoDialog(scope) {
      this.videoURL = scope.videoURL
      this.videoDialogVisible = true
    },
    closeBtn() {
      this.videoDialogVisible = false
      this.videoURL = ''
    },
    // 预览
    previewDialogShow(scope) {
      this.data = scope
      this.previewVideoDialogVisible = true
    },
    // 添加
    addDialogShow() {
      this.addDialogVisible = true
    },
    onEditorChange({ editor, html, text }) {
      this.content = html
    },
    editDialogShow(scope) {
      console.log(scope)
      this.editRuleForm.title = scope.title
      this.editRuleForm.content = scope.articleBody
      this.editRuleForm.url = scope.videoURL
      this.editId = scope.id
      this.editDialogVisible = true
    },
    // 修改
    async editDialog() {
      try {
        await update({
          id: this.editId,
          title: this.editRuleForm.title,
          articleBody: this.editRuleForm.content,
          videoURL: this.editRuleForm.url
        })
        this.getArticlesList()
        this.$message.success('修改文章成功')
      } catch (err) {}
      this.editDialogVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-card {
  margin: 20px;
}
.articles-form {
  margin-top: 10px;
  .el-form-item__label {
    font-size: 16px;
  }
  .articles-form-input {
    width: 200px;
  }
}
.el-form-item {
  display: inline-block;
  margin-left: 20px;
}
.tags-btn {
  margin-left: 20px;
}

.add-contents {
  float: right;
}
.block {
  float: right;
  margin: 20px;
}
.video {
  color: #3b51ff;
  font-size: 18px;
}

.video-dialog {
  width: 100%;
  display: block;
}
.videoDialogVisible {
  .el-dialog__header {
    background-color: unset;
  }
  .el-dialog__body {
    padding: unset !important;
  }
  .el-dialog__header {
    display: none;
  }
}

.closeBtn {
  position: absolute;
  top: -7%;
  left: 48%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  .el-icon-error {
    font-size: 50px;
    color: #333;
  }
}
.edit-ruleForm {
  padding: 30px 20px 30px 0;
  padding-bottom: 0;
  .el-form-item {
    width: 97.9%;
  }
}
.formItem {
  margin-top: 20px;
}
</style>
